<script lang="ts" setup>
import { ref,onMounted } from "vue";
import { useLayerDecorator,useLayerParamsDecorator } from "@/utils/GV_DrawFn/LayerDecorator";
import { useEarthGroup } from "@/utils/GV_DrawFn/EarthViewerGroup";
import { useEarthStore } from "@/stores/earthObj";
const store = useEarthStore();
import {Delete} from '@element-plus/icons-vue'
import { useElementDragable } from "@/hook/vDrag.tsx";
import {useSatelliteManager} from '@/hook/SatelliteManager'

let viewer = store.getViewer();
let group = new useEarthGroup(viewer);

let timer:any = null;
let manager:any = null;
const initSatellite = ()=>{
  
  if(!viewer){
      timer = setTimeout(()=>{
        clearTimeout(timer)
        initSatellite()
      },100)
      return false;
  }
  clearTimeout(timer);
  useDecorator = new useLayerDecorator(viewer);

  const satellites = new Cesium.CustomDataSource("satellite");
  viewer.dataSources.add(satellites);

  // 使用示例
  manager = new useSatelliteManager(viewer,satellites);

  // 添加惯性系卫星
  // const sat2 = manager.addSatellite('SAT-02', {
  //   referenceFrame: Cesium.ReferenceFrame.INERTIAL,
  //   pointColor: Cesium.Color.BLUE,
  //   pathColor: Cesium.Color.CYAN
  // });
  
  // 添加位置数据（示例数据）
  const fixedPositions= []

  let i=0;
  while(i < 360){
    fixedPositions.push([i, 0, 357860])
    i+=6;
  }
  fixedPositions.push([360, 0, 357860])
  
  const fixedPositions1= []

  let s=0;
  while(s < 360){
    fixedPositions1.push([s, 10, 357860])
    s+=40;
  }
  fixedPositions1.push([360, 10, 357860])

    // '2023-01-01T00:00:00Z',
    // '2023-01-01T02:00:00Z',
    // '2023-01-01T04:00:00Z',
    // '2023-01-01T06:00:00Z'
  
  const times = [];
  let date = new Date();

  for(let i=0;i<fixedPositions.length;i++){
    times.push(date.toISOString())
    date.setHours(date.getHours() + 26);
  }

    // 添加地固系卫星
  const sat1 = manager.addSatellite('SAT-01', {
    pointColor: Cesium.Color.ORANGE,
    pathColor: Cesium.Color.ORANGE,
    positions:fixedPositions,
    times:times,
  });

  const sat2 = manager.addSatellite('SAT-02', {
    pointColor: Cesium.Color.RED,
    pathColor: Cesium.Color.RED,
    positions:fixedPositions1,
    times:times,
  });

  manager._updateClockRange({
    shouldAnimate:true,
    multiplier:10
  })
  manager.createMaskLayer()
  let EarthBindHandle = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  // 添加右击方法
  EarthBindHandle.setInputAction((event: any) => {
    let pick = viewer.scene.pick(event.position);
    if (Cesium.defined(pick)) {
      console.log(pick);
      
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  // manager.addSampledPositions('SAT-01', fixedPositions, times);
  // manager.addSampledPositions('SAT-02', inertialPositions, times);
  
}

let f = "FIXED"
const setF = ()=>{
    manager.setReferenceFrame(f == "FIXED" ? "INERTIAL" : "FIXED")
    f = f == "FIXED" ? "INERTIAL" : "FIXED"
}

const delF = ()=>{
  manager.destroySatellite()
}
let flag = true;
const setD = ()=>{
  manager.setSatelliteDetection("SAT-01",flag)
  console.log(flag);
  
  flag = !flag;
}
let useDecorator = null;
let paramsDecorator = new useLayerParamsDecorator();

let dataSource = ref([
  {
    id: 1,
    label: "图层",
    children: [
      {
        id: "1_0",
        label: "底图影像",
        visable: false,
        type: "wms",
        param: {
          url: "http://localhost:8210/service/wms",
          layers: "Global_Image-JPEG-4326",
          parameters: { format: "image/jpeg" },
          minimumLevel: 0,
          maximumLevel: 14,
        },
      },
      {
        id: "1_1",
        label: "地名地址",
        visable: false,
        type: "wmts",
        param: {
          url: "http://localhost:8210/service/wmts",
          layer: "Global_ImageLabel-PNG-4326",
          format: "image/png",
          minimumLevel: 0,
          version: "1.1.1",
          tileMatrixSetID: "EPSG:4326",
          style: "default",
          maximumLevel: 14,
        },
      },
      {
        id: "1_2",
        label: "地形",
        visable: false,
        type: "terrain", 
        param: {
          url: "http://localhost:8210/service/terrain/Global_DEM-HeightMap-4326",
          requestVertexNormals: true,
        }, 
      },
      {
        id: "1_3",
        label: "3D模型",
        visable: false,
        type: "3DTile",
        param: {
          url: "http://localhost:5173/static/tile/tileset.json",
          isFlyTo: true,
        },
      },
      {
        id: "1_4",
        label: "天地图",
        visable: false,
        type: "xyz",
        param: {
          url: "/api/DataServer?T=cva_w&tk=key&x={x}&y={y}&l={z}",
        },
      },
      {
        id: "1_5",
        label: "地理数据",
        visable: false,
        type: "geo",
        param: {
          url: "http://localhost:5173/static/YNsheng.geojson",
          strokeColor: "#098",
          fillColor: "#98dd28",
          opacity: 0.2,
          isFlyTo: true,
          strokeWidth: 100,
        },
      },
      {
        id: "1_6",
        label: "加载模型",
        visable: false,
        type: "model",
        param: {
          url: "http://localhost:5173/static/Cesium_Air.glb",
          scale: 2.0,
          position: [-75.628985, 39.555726, 1000],
          isFlyTo: false,
        },
      },
    ],
  },
]);

const CheckChangeHandle = (row: any) => {
  row.visable = !row.visable;
  if (row.children) return false;
  let params = {
    visable: row.visable,
    id: row.id,
    ...row.param
  };

  useDecorator.useMain(params, row.type);
};

let dragMargin = ref()
let layerTree = ref();
onMounted(() => {
  new useElementDragable(dragMargin.value, layerTree.value);
  initSatellite()
})
</script>
<template>
  <div class="layerManage" ref="layerTree">
    <div class="layer_tree">
      <div class="dragMargin" ref="dragMargin"></div>
      <button @click="setF">ss</button>
      <button @click="setD">修改</button>
      <button @click="delF">删除</button>
      <el-tree
        class="layerel_tree"
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @check-change="CheckChangeHandle"
      >
        <template #default="{ node, data }">
          <div class="customNode">
            <div class="customLable">
              {{ node.label }}
            </div>
            <div class="customOperate">
              <el-icon><Delete /></el-icon>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<style scoped>
.customNode{
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.layerManage {
  position: absolute;
  right: 3%;
  top: 12%;
  border-radius: 6px;
  width: 300px;
  height: auto;
  z-index: 10;
}
.layer_tree {
  width: 100%;
  height: 500px;
  padding: 10px;
  background-color: rgba(37, 72, 128, 0.77);
}
.layerel_tree {
  background: none;
  color: #fff;
}
:deep(.el-tree-node__content:hover) {
  background-color: #09a;
}
:deep(.is-current) {
  background: #09a;
}
.dragMargin{
  width: 100%;
  cursor: all-scroll;
  height: 20px;
}
</style>
